<template>
    <div>
        <h1>文章管理</h1>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" stripe
            @selection-change="handleSelectionChange">
            <el-table-column prop="title" label="标题">
            </el-table-column>
            <el-table-column prop="issueTime" label="发行时间">
            </el-table-column>
            <el-table-column prop="state" label="状态">
                <template slot-scope="scope">
                    <el-tag size="small" v-if="scope.row.state === 1" type="success">已通过</el-tag>
                    <el-tag size="small" v-else-if="scope.row.state === 0" type="warning">待审核</el-tag>
                    <el-tag size="small" v-else-if="scope.row.state === 2" type="danger">未通过</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="icon" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="editHandle(scope.row.id)">编辑</el-button>
                    <el-divider direction="vertical"></el-divider>
                    <template>
                        <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delHandle(scope.row.id)">
                            <el-button type="text" slot="reference">删除</el-button>
                        </el-popconfirm>
                    </template>
                    <el-divider direction="vertical"></el-divider>
                    <el-button type="text" @click="look(scope.row.id)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100]" :current-page="current"
            :page-size="size" :total="total">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: "Manage",
    data() {
        return {
            total: 0,
            size: 10,
            current: 1,
            tableData: [],
        }
    },
    created() {
        this.LoadData();
    },
    methods: {
        LoadData() {
            this.$axios.get("/article/my", {
                params: {
                    pageNum: this.current,
                    pageSize: this.size
                }
            }).then(res => {
                this.tableData = res.data.data.records
                this.size = res.data.data.size
                this.current = res.data.data.current
                this.total = res.data.data.total
            })
        },
        look(id) {
            const ARTICLE_URL = "http://localhost:8080/arti/detail/" + id;
            //return ARTICLE_URL;
            window.open(ARTICLE_URL, "_blank")
        },
        delHandle(id) {

            var ids = []

            if (id) {
                ids.push(id)
            } else {
                this.multipleSelection.forEach(row => {
                    ids.push(row.id)
                })
            }

            console.log(ids)

            this.$axios.post("/article/delete", ids).then(res => {
                this.LoadData();
                this.$message({
                    showClose: true,
                    message: '恭喜你，操作成功',
                    type: 'success',
                    onClose: () => {
                        this.getUserList()
                    }
                });
            })

        },
        editHandle(arti_id){
            this.$router.push({name:'EditArtice',params: {edit_id:arti_id}})
        }
    }
}
</script>

<style scoped>

</style>